<template>
  <div class="department-icon">
    <img 
      :src="iconSrc" 
      :alt="departmentName" 
      @error="handleImageError"
      @load="handleImageLoad"
      class="icon-image"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Props {
  departmentName: string
  iconUrl?: string
}

const props = defineProps<Props>()

// 科室图标映射表 - 使用本地SVG图标
const departmentIconMap: { [key: string]: string } = {
  '外科': '/icons/surgery.svg',
  '眼科': '/icons/eye.svg',
  '牙科': '/icons/dental.svg',
  '骨科': '/icons/bone.svg',
  '儿科': '/icons/baby.svg',
  '妇产科': '/icons/pregnant.svg',
  '内科': '/icons/doctor.svg',
  '皮肤科': '/icons/skin.svg',
  '神经科': '/icons/brain.svg',
  '心脏科': '/icons/heart.svg',
  '心脏病学科室': '/icons/heart.svg',
  '耳鼻喉科': '/icons/stethoscope.svg',
  '一般护理': '/icons/doctor.svg',
  '产科': '/icons/pregnant.svg',
  '妇科': '/icons/pregnant.svg',
  '卫生保健科': '/icons/health.svg'
}

// 备用图标列表 - 使用本地图标
const fallbackIcons = [
  '/icons/doctor.svg',
  '/icons/heart.svg',
  '/icons/baby.svg',
  '/icons/health.svg'
]

const currentIconIndex = ref(0)
const hasTriedFallback = ref(false)

// 计算图标源
const iconSrc = computed(() => {
  // 优先使用传入的图标URL
  if (props.iconUrl && !hasTriedFallback.value) {
    return props.iconUrl
  }
  
  // 其次使用映射表中的图标
  const mappedIcon = departmentIconMap[props.departmentName]
  if (mappedIcon && !hasTriedFallback.value) {
    return mappedIcon
  }
  
  // 最后使用备用图标
  return fallbackIcons[currentIconIndex.value] || fallbackIcons[0]
})

// 图片错误处理
const handleImageError = () => {
  console.log('图片加载失败:', props.departmentName, iconSrc.value)
  
  if (!hasTriedFallback.value) {
    // 第一次失败，尝试使用映射的图标
    hasTriedFallback.value = true
    return
  }
  
  // 尝试下一个备用图标，但限制尝试次数
  if (currentIconIndex.value < fallbackIcons.length - 1) {
  currentIconIndex.value = (currentIconIndex.value + 1) % fallbackIcons.length
  } else {
    // 所有备用图标都尝试过了，使用默认图标
    console.log('所有图标都加载失败，使用默认图标')
  }
}

// 图片加载成功处理
const handleImageLoad = () => {
  console.log('图片加载成功:', props.departmentName)
}
</script>

<style lang="scss" scoped>
.department-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #f0f8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
}

.icon-image {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
</style> 